import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import './labelmanagemedical.css'
import { AtList, AtListItem,AtSwipeAction } from "taro-ui"
import app from '../../../../main.js'

export default class LabelManageMedical extends Component {

  	config = {
    	navigationBarTitleText: '病历标签管理'
 	 }
    constructor () { 
        super(...arguments); 
        this.state = {
			receive_array:[],
            idd:'',
        }
    }

    componentWillMount () {
        this.allMedicalLabel();
  	}

	navigateTo(url){
		app.redirectTo(url);
	}

	//从api接口接收数据
	allMedicalLabel(){
		let me = this;
        let data = {};       
        let arr = [];
		app.get('web/caselabel/many', data, function(res){
			arr = res.data.result;
			me.setState({
                receive_array:arr,
			})
        })      
	}

	//点击标签
	editLabel(id,name,index){
		app.redirectTo('../editlabelmedical/editlabelmedical?id='+id+'&name='+name)
		this.setState({
			idd:id
		})
		// // console.log('1')
	}

	//点击删除按钮
	deleteOption= (e) =>{    
		console.log('2')
		let me = this;
        Taro.showModal({
            title: '提示',
            content: '确认删除',
		}).then(res=>{
			var data = {};
            data.label_id = me.state.idd
            app.post("web/caselabel/delete", data, function (res) {
			})	
			app.redirectTo('../labelmanagemedical/labelmanagemedical')		
		})
		
	}
    
  	render () {
		return (
		<View className='label-manage-medical'>

			<AtList >
				<AtListItem 
				title='添加新标签' 
				className='add-tag' 
				hasBorder={false} 
				arrow='right' 
				onClick={this.navigateTo.bind(this,'../editlabelmedical/editlabelmedical?id=0')} 
				thumb={app.imageUri+'img/tianjiabingli.png'}
				/>
			</AtList>

			<View className='title'>全部病历标签</View>

			<AtList className='tags'>
				{this.state.receive_array.map((item,index) =>{
					return(
						<View onClick={this.editLabel.bind(this,item.id,item.name,index)}>
							<AtSwipeAction
								disabled
								onClick = {this.deleteOption.bind(this)}
								autoClose={true}
								options={[
									{
										text: '删除',
										style: {backgroundColor: '#FF4949'}
									}
								]}>
								<AtListItem
									title={item.name} 
									arrow='right' 
									extraText={String(item.amount)} 
								/>
							</AtSwipeAction>
					</View>
					)
				}
				)}
			</AtList>
      </View>
    )
  }
}